<template>
  <div>
    <el-dialog title="修改昵称" :visible.sync="dialogVisible" width="450px" :append-to-body="true" @close="closeEditDialog" :close-on-click-modal ="false">
      <el-form :model="editRowInfo" :rules="rulesUpdateForm" ref="refUpdateForm" label-width="80px" class="update-form">
        <el-form-item size="small" label="昵称" >
          <el-input clearable v-model="editRowInfo.nickname" oninput="value=value.replace(/\s*/g,'')"
            @blur="editRowInfo.nickname = $event.target.value" maxlength="10" placeholder="请输入昵称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeEditDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" class="confirm-button" @click="editSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { updateUser } from "@/api/api";
  import { validateSpecialChar } from "@utils/validate";
  export default {
    name: "editUser",
    props: ["editRowInfo"],
    data() {
      return {
        dialogVisible: false,
        // 表单修改验证信息
        rulesUpdateForm: {
          nickname: [{
              required: true,
              message: "请输入昵称",
              trigger: "blur"
            },
            {
              validator: validateSpecialChar
            },
            {
              min: 2,
              max: 20,
              message: "长度在 2 到 20 位",
              trigger: "blur",
            },
          ],
        },
      };
    },
    methods: {
      // 修改确认
      editSubmit() {
        this.$refs.refUpdateForm.validate(async (valid) => {
          if (!valid) return 
          const res = await updateUser({
            id: this.editRowInfo.id,
            nickname: this.editRowInfo.nickname,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("修改成功");
            this.$store.commit("saveNickName", this.editRowInfo.nickname); //页面更换昵称
          this.dialogVisible = false;
        });
      },
      //点击取消和关闭按钮
      closeEditDialog() {
        // this.$emit("clearEditInfo"); //清空editInfo,消除视觉残留
        this.$refs.refUpdateForm.resetFields();
        this.dialogVisible = false;
      },
    },
    watch: {
      roleId(val) {
        this.roleIdArr = val;
      },
    },
  };
</script>

<style lang="less" scoped>
  @import url("../../common.less");
</style>